<template>
  <el-col :span="configData.span">
    <el-form
      ref="ruleForm"
      :model="formValues"
      :size="configData.formSize"
      :label-position="configData.labelPosition"
      :label-width="configData.labelWidth + 'px'"
      :inline="inline"
      :rules="rules"
      :validate-on-rule-change="false"
      :hide-required-asterisk="true"
      style="height: 100%;width: 100%;"
      class="demo-form-inline"
      @mouseenter="hover"
    >
      <draggable :list="formList" :options="dragOptions" :clone="clones" style="width: 100%;height: 100%;" >
        <div v-for="(item,index) in formList" :key="index" :class="['formList-box',{'formList-block':item.block}]" >
          <slot :name="`beforeSlot${index}`" />
          <span v-if="!item.visibility && logID == 'configForm'">{{ item.label }} = {{ item.name }} - {{ item.visibility }}</span>
          <el-col v-if="item.visibility" :span="Number(item.span)" >
            <el-form-item
              :label="item.label + (logID == 'configForm' ? `=${item.name}-${item.visibility}` : '')"
              :prop="item.name"
              :style="item.style"
              :class="[item.class,'v-form-item']"
            >
              <!-- :required="item.required"
            :error="item.errorMessage" -->
              <div class="item-li" @mouseenter="hover(hoverArr,index,true)" @mouseleave="hover(hoverArr,index,false)">
                <!-- <v-form-item ref="item" :item="item" :form="formValues" @submitForm="submitForm" /> -->
                <div class="item-content">
                  <renders :ele="item" v-model="formValues[item.name]" />
                </div>

                <div v-if="hoverArr[index] && setting" class="item-li-tool" >
                  <span>
                    <i class="el-icon-setting" @click="settingEle(item,index)" />
                    <i class="el-icon-circle-close-outline" @click="delEle(index)" />
                  </span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <slot :name="`afterSlot${index}`" />
        </div>
      </draggable>
    </el-form>
  </el-col>
</template>
<script>
import draggable from 'vuedraggable'
import formItemData from '../components/list.js'
import vFormItem from './formItem.vue'
export default {
  name: 'XFrom',
  components: { draggable, vFormItem },
  props: {
    formData: {
      type: [Array, Object],
      default: null
    },
    formValue: {
      type: Object,
      default: function() {
        return {}
      }
    },
    inline: {
      type: Boolean,
      default: false
    },
    rules: {
      type: [Array, Object],
      default: null
    },
    draggable: {
      type: Object,
      default: null
    },
    formConfig: {
      type: Object,
      default: function(o) {
        return Object.assign({
          labelPosition: 'right',
          labelWidth: 100,
          formSize: 'medium',
          span: 24
        }, o)
      }
    }
  },
  data() {
    return {
      configData: this.formConfig,
      formValues: {},
      hoverArr: [],
      logID: null,
      change: false,
      setting: false
    }
  },
  computed: {
    dragOptions() {
      return this.draggable || { disabled: true }
    }
  },
  watch: {
    formList: {
      handler(o) {
        console.log('updata=formList')
        this.setFormValue(o)
      },
      deep: true
    },
    formData: {
      handler(o) {
        console.log('updata=formData')
        console.log(o)
        this.formList = o
        // this.formValues = this.formValue
      },
      deep: true
    },
    formValues: {
      handler(newName, oldName) {
        if (!this.change) return
        this.$emit('change', this.formValues)
        console.log('from - changechangechangechange')
      },
      deep: true
    }
  },
  created() {
    const event = this._events
    this.logID = this.$attrs.id
    event.change && (this.change = true)
    event.setting && (this.setting = true)
    this.formList = this.formData
    this.formValues = this.formValue
  },
  methods: {
    upData(e) {
      console.log(e)
      this.$emit('input', this.innerText)
    },
    submitForm(item) {
      this.$refs.ruleForm.validate((valid, data) => {
        if (valid) {
          this.$emit('submitForm', this.formValues)
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    hover(e, i, n) {
      if (!this.setting) return
      this.$set(e, i, n)
    },
    setFormValue(form) {
      if (!form) return
      const data = Array.isArray(form) ? form : [form]
      // this.formValues = {}
      const value = {}
      data.forEach(e => {
        if (e.name && !value[e.name]) {
          value[e.name] = e.category == 'checkbox' || e.category == 'cascader' ? [] : typeof (e.value) != 'undefined' ? e.value : ''
        }
      })
      console.log('from - setFormValuesetFormValuesetFormValue' + JSON.stringify(value))
      this.formValues = value
      // this.$set(this.formValues, e.name, e.category == 'checkbox' || e.category == 'cascader' ? [] : typeof (e.value) != 'undefined' ? e.value : '')
    },
    clones(e, o) {
      const genRandomString = len => {
        let rdmString = ''
        while (rdmString.length < len) {
          rdmString += (Math.random() * 37 | 0).toString()
        }
        return rdmString
      }
      const temps = Object.assign({}, formItemData[e.name] ? formItemData[e.name].config : {})
      temps.name = temps.name + '_' + genRandomString(8)
      return temps
    },
    setConfig(e) {
      this.formList[e.i] = e.e
      console.log('from - setConfigsetConfigsetConfigsetConfig')
      this.setFormValue(this.formList)
    },
    setFormConfig(e) {
      this.configData = e
    },
    settingEle(e, i) {
      this.$emit('setting', { e, i })
    },
    delEle(i) {
      this.formList.splice(i, 1)
    }
  }
}
</script>
<style lang="scss">
  .v-form-item{
      width: 100%;
  }
</style>
<style lang="scss" rel="stylesheet/sass" scoped>
  .v-form-item{
      width: 100%;
      & > div{
         width: 100%;
      }
  }
  .item-li {
    display: flex;
    .item-li-tool {
      width: 80px;
      margin-left: 10px;
      cursor: Pointer;
      i {
        color: #188ae2;
      }
    }
  }
  .formList-box{
    display: inline-block;
    width: 100%;
    &.formList-block{
      display: block;
    }
  }
  .item-content{
    width: 100%;
    & > {
      width: 100%;
    }
  }
  .form_input{
      width: 100%;
      &.form_input_rate{
        margin-top: 8px;
      }
  }

</style>
